<script setup lang="ts">
import { ref, reactive, onMounted, watch } from "vue";
import { Cell, Tab, Tabs, List, Toast, Icon, Empty,Search } from "vant";
import MapContainer from "@/components/MapContainer.vue";
import { getStoresList } from "@/api/api";
let active = ref(0)
let inputValue = ref("");
let latitude = ref<string>('')
let longitude = ref<string>('')
let cityName = ref<string>('')

interface IList {
  address: string
  distance: number
  latitude: string
  longitude: string
  name: string
}
let list = ref<IList[]>([])
let areaList = ref<IList[]>([])
// 获取经纬度和城市名称
let getData = (data: any) => {
  latitude.value = data.latitude
  longitude.value = data.longitude
  cityName.value = data.city
}

let loading = ref(false);
let finished = ref(true);
let onSearch = (status: number) => {
  if (status === 0) {
    list.value = []
  }
  let params = {
    cityName: cityName.value,
    longitude: longitude.value,
    latitude: latitude.value,
    name: inputValue.value
  };
  getStoresList(params).then((reponse: any) => {
    if (reponse.data.code == "000000") {
      loading.value = true
      finished.value = true
      list.value = reponse.data.data
    } else {
      Toast(reponse.data.msg?reponse.data.msg:'请求失败')
      finished.value = true
    }
  });
};
const childRef = ref<any>(null);
let showMap = (item: any) => {
  active.value = 1
  areaList.value = item
  childRef.value.clickData(areaList.value);
};
</script>

<template>
  <Search show-action v-model="inputValue" placeholder="请输入门店信息" @search="onSearch(0)">
    <template #action>
      <div @click="onSearch(0)">搜索</div>
    </template>
  </Search>
  <div style="height:calc(100% - 60px)">
    <Tabs v-model:active="active" sticky swipeable color="#1677FF" ref="tabs" title-active-color="#1677FF" style="height:100%">
      <Tab title="列表">
        <template #title>
          <Icon name="bag-o" />列表
        </template>
        <List v-model:loading="loading" :finished="finished" finished-text="亲，没有更多了" @load="onSearch(1)"
          error-text="加载失败" v-if="list.length > 0">
          <Cell v-for="item in list" :key="item.name" :value="item.distance + '公里'" :title="item.name"
            :label="item.address" :item="item" is-link @click="showMap(item)" />
        </List>
        <Empty image="/static/null.png" v-else description="亲，没有搜索到门店信息哦" />
      </Tab>
      <Tab title="地图">
        <template #title>
          <Icon name="location-o" />地图
        </template>
        <MapContainer @getData="getData" ref="childRef" :storeList="list" :areaList="areaList"></MapContainer>
      </Tab>
    </Tabs>
  </div>

</template>

<style scoped lang="less">
:deep(.van-cell__title, .van-cell__value) {
  flex: 1 auto !important;
}

:deep(.van-cell__value) {
  min-width: 80px;
}

:deep(.van-tab) {
  font-size: 17px;
}

:deep(.van-tabs__content) {
  margin-top: 20px;
}

:deep(.van-cell) {
  align-items: center;
}

:deep(.van-search__action) {
  font-weight: 400;
  font-size: 15px;
  color: #1677ff;
}

.stores-title {
  height: 45px;
  line-height: 45px;
  padding: 0 12px;
}

:deep(.van-search__content) {
  border: 1px solid #1677FF;
  border-radius: 6px;
}

:deep(.van-cell__title) {
  color: #333;
  font-size: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
:deep(.van-cell__label){
      white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
:deep(.van-tabs__content,.van-tab__panel){
  height:100%;
}
:deep(.van-tab__panel){
  height:100%;
}
</style>
